<template>
	<div class="">
	<ul class="list">
		<li class="item"
			v-for="item of letters"
			:key="item"
			:ref="item"
			@click="handleLetterClick"
			@touchstart.prevent="handleTouchStart"
			@touchmove="handleTouchMove"
			@touchend="handleTouchEnd"
			>
			{{item}}
		</li>
	</ul>
	<div class="showtitle" v-show="moveStartShow">
		{{letterNum}}
	</div>
</div>
</template>

<script>
export default {
	name: 'CityAlphabet',
	props: {
		cities: Object,
	},
	computed: {
		letters () {
			const letters = []
			for (let i in this.cities) {
				letters.push(i)
			}
			return letters
		}
	},
	data () {
		return {
			touchStatus: false,
			moveStartShow: false,
			letterNum: '',
			startY: 0,
			timer: null
		}
	},
	//钩子
	updated () {
		//获取A距离父元素的距离
		this.startY = this.$refs['A'][0].offsetTop
	},
	methods: {
		handleLetterClick (e) {
			this.$emit('change', e.target.innerText)
		},
		handleTouchStart () {
			this.touchStatus = true
		},
		handleTouchMove (e) {
			this.moveStartShow = true
			this.$refs['B'][0].style="fontSize: .4rem"
			if (this.touchStatus) {
				if(this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					//获取手指距离屏幕顶端的距离
					const touchY = e.touches[0].clientY-79
					const index = Math.floor((touchY-this.startY) / 22)
					if(index >= 0 && index < this.letters.length) {
						this.$emit('change',this.letters[index])
						this.letterNum = this.letters[index]
					}
				}, 16)
			}
		},
		handleTouchEnd () {
			this.touchStatus = false
			this.moveStartShow = false
		},
	}
}

</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list
		display:flex
		flex-direction: column
		justify-content: center
		position: absolute
		top: 1.58rem
		right: 0
		bottom: 0
		width: .8rem
		.item
			line-height:.44rem
			color: $bgColor
			text-align: center
	.showtitle
		position: absolute
		width: 1rem
		height: 1rem
		border-radius: 1rem
		border: .04rem solid $bgColor
		left: 50%
		top: 50%
		margin: -.5rem 0 0 -.5rem
		text-align: center
		line-height: 1rem
		font-size: .6rem
		color: $bgColor
</style>
